import React, { Component } from 'react';
import moment from 'moment'
import { connect } from 'react-redux'
import { Modal, Form, Input, Radio, InputNumber, DatePicker } from 'antd';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

class AddRegistration extends Component {
    constructor(props) {
        super(props);
    }

    okHandler = () => {
        const { onOk } = this.props;
        this.props.form.validateFields((err, values) => {
         if (!err) {
            onOk(values);
         }
        });
     }; 

    render() {
        const { getFieldDecorator } = this.props.form;  
      
        const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
        };  

        return (
            <span>
                <Modal
                    maskClosable= {this.props.maskClosable}
                    confirmLoading= {this.props.confirmLoading}
                    title={this.props.title}
                    visible={this.props.visible}
                    onOk={this.okHandler}
                    onCancel={this.props.onCancel}
                    key={this.props.newKey}
                >
                    <Form layout='horizontal' onSubmit={this.okHandler}>
                        <FormItem
                            {...formItemLayout}
                            label="姓名"
                            hasFeedback
                        >
                            {
                            getFieldDecorator('name', {
                                rules: [{
                                required: true, whitespace: true, message: '请输入人员姓名',
                                },{
                                max:10,message: '姓名不能超出10字',
                                }]
                            })(<Input  placeholder="请输入人员姓名" />)
                            }
                        </FormItem>  
                        <FormItem
                            {...formItemLayout}
                            label="证件类型"
                            hasFeedback
                        >
                            {
                            getFieldDecorator('cardType', {
                                rules: [{
                                required: true, whitespace: true, message: '请输入证件类型',
                                },{
                                max:10,message: '证件类型不能超出10字',
                                }]
                            })(<Input  placeholder="请输入证件类型" />)
                            }
                        </FormItem>  
                        <FormItem
                            {...formItemLayout}
                            label="证件号"
                            hasFeedback
                        >
                            {
                            getFieldDecorator('idCard', {
                                rules: [{
                                required: true, whitespace: true, message: '请输入人员证件号',
                                },{
                                max:50,message: '姓名不能超出50字',
                                }]
                            })(<Input  placeholder="请输入证件号" />)
                            }
                        </FormItem>  
                        <FormItem
                            {...formItemLayout}
                            label="单位"
                            hasFeedback
                        >
                            {
                            getFieldDecorator('org', {
                                rules: [{
                                required: true, whitespace: true, message: '请输入人员单位',
                                },{
                                max:25,message: '人员单位不能超出25字',
                                }]
                            })(<Input  placeholder="请输入人员单位" />)
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="类型"
                            hasFeedback
                        >
                            {
                            getFieldDecorator('type', {
                                rules: [{
                                required: true, message: '请选择人员类型',
                                }]
                            })(
                                <RadioGroup>                                
                                  <Radio value={1}>内部人员</Radio>
                                  <Radio value={2}>外部访客</Radio>
                                </RadioGroup>
                            )
                            }
                        </FormItem> 
                        <FormItem
                            {...formItemLayout}
                            label="事由"
                            hasFeedback
                        >
                            {
                            getFieldDecorator('reason', {
                                rules: [{
                                required: true, whitespace: true, message: '请输入事由',
                                },{
                                max:500,message: '事由不能超过500字',
                                }]
                            })(<TextArea rows={4}  placeholder="请输入事由" />)
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="预计时间（小时）"
                            hasFeedback
                        >
                            {
                            getFieldDecorator('expected', {
                                rules: [
                                    { required: true, message: '请输入预计时间' },
                                    { type: 'number', message: '请输入数字' }
                                ]
                            })(<InputNumber  
                                placeholder="请输入预计时间"
                                min={1}
                                max={24} 
                            />)
                            }
                        </FormItem>
                        
                    </Form>
                </Modal>  
            </span>
        );
    }
}

export default Form.create()(AddRegistration)